import React, { useState, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { useRouter } from "next/router";

const NavBar = () => {
  const { t } = useTranslation();
  const [navClose, setNavClose] = useState({ right: "0px" });
  const router = useRouter();

  useEffect(() => {
    if (window.innerWidth < 750) {
      setNavClose({ right: "-410px" });
    }
    if (window.innerWidth < 1199) {
      setNavClose({ right: "-300px" });
    }
  }, []);

  const openNav = () => {
    setNavClose({ right: "0px" });
    if (router.asPath == "/layouts/Gym")
      document.querySelector("#topHeader").classList.add("zindex-class");
  };

  const closeNav = () => {
    setNavClose({ right: "-410px" });
    if (router.asPath == "/layouts/Gym")
      document.querySelector("#topHeader").classList.remove("zindex-class");
  };
  // eslint-disable-next-line

  return (
    <>
      <div>
        <div className="main-navbar">
          <div className="nav-phone-icon">
            <img src={`/assets/images/icon/ze-phone.png`} alt="" className="img-icon" />
          </div>
          <div id="mainnav">
            <div className="toggle-nav" onClick={openNav.bind(this)}>
              <i className="fa fa-bars sidebar-bar"></i>
            </div>
            <ul className="nav-menu" style={navClose}>
              <li className="back-btn" onClick={closeNav.bind(this)}>
                <div className="mobile-back text-right">
                  <span>Back navbar</span>
                  <i className="fa fa-angle-right pl-2" aria-hidden="true"></i>
                </div>
              </li>
              <ul className="nav-bar-ul1">
                <li>24 / 7</li>
                <li className="nav-bar-ul1 li1">Support:</li>
              </ul>
              <ul className="nav-bar-ul2">
                <li>+86 18753589728</li>
              </ul>
            </ul>
          </div>
        </div>
      </div>
    </>
  );
};

export default NavBar;
